<template>
    <div>
        <Header></Header>
        <!--轮播图-->
        <div class="banner">
            <div class="item">
                <img :src="dataList[currentIndex]">
            </div>
            <div class="page" v-if="this.dataList.length>1">
                <ul>
                    <li @click="gotoPage(prevIndex)">&lt;</li>
                    <li v-for="(item,index) in dataList" :key="item" @click="gotoPage(index)" :class="{'current':currentIndex==index}">{{index+1}}</li>
                    <li @click="gotoPage(nextIndex)">&gt;</li>
                </ul>
            </div>
        </div>
        <!--企业展示-->
        <div class="middle">
            <div class="line">企业展示</div>
            <div class="content">
                云视车联是由长城汽车战略投资的车联网科技公司，服务于汽车全产业链，
                用智能、网联、数据重新定义汽车和服务。云视车联座落于天津市滨海新区，受滨海
                新区的高度重视，寄希望云视车联带动滨海智能汽车产业链升级
            </div>
            <div class="middle_img" style="background-image:url(http://hughspartan.top/blog/images/hello.jpg)">
                <div class="middle_content">
                    <h2>Show Product</h2>
                    <h2 class="name">产品展示</h2>
                    <a >汽车产品</a><br>
                    <a>车辆网产品</a>
                </div>
            </div>
            <div class="middle_img" style="background-image:url(http://hughspartan.top/blog/images/hello.jpg)">
                <div class="middle_content">
                    <h2>Develop History</h2>
                    <h2 class="name">发展历程</h2>
                    <p class="detail">进入智能化、互联化时代，发布G-BOSⅢ代，引领车联网智慧新浪潮。</p>
                </div>
            </div>
            <div class="middle_img" style="background-image:url(http://hughspartan.top/blog/images/hello.jpg)">
                <div class="middle_content">
                    <h2>Solution</h2>
                    <h2 class="name">解决方案</h2>
                    <a >新能源车辆监控服务平台解决方案</a><br>
                    <a>公路运输信息化解决方案</a><br>
                    <a >校车运营管理解决方案</a><br>
                    <a>成功案例</a>
                    <p class="detail">进入智能化、互联化时代，发布G-BOSⅢ代，引领车联网智慧新浪潮。</p>
                </div>
            </div>
            <div class="middle_img1" style="background-image:url(http://hughspartan.top/blog/images/hello.jpg)">
                <div class="middle_content">
                    <h2>Develop History</h2>
                    <h2 class="name">关于我们</h2>
                    <p class="detail"><p style="font-size:16px;">上海创程车联网络科技有限公司成立于2011年9月，注册资金1000万元人民币，是一家专业从事商用车汽车电子产品研发、车联网应用软件研发与信息服务的科技企业。</p>
                </div>
            </div>
            <div class="middle_img1" style="background-image:url(http://hughspartan.top/blog/images/hello.jpg)">
                <div class="middle_content">
                    <h2>New Center</h2>
                    <h2 class="name">新闻中心</h2>
                    <a >上海创程助力油城公交公司主动安全系统的使用</a><br>
                    <a>上海创程2020年度工作总结暨表彰大会简讯</a><br>
                    <a >2020年第三季度评优</a><br>
                </div>
            </div>
        </div>
        <!--合作伙伴-->
        <div class="middle">
            <div class="line">合作伙伴</div>
            <table class="cooperation">
                <tr>
                    <td><img class="coImg" src="../assets/img/co1.jpg"></td>
                    <td><img class="coImg" src="../assets/img/co2.jpg"></td>
                    <td><img class="coImg" src="../assets/img/co3.jpg"></td>
                </tr>
            </table>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from './header.vue'
import Footer from './footer.vue'
export default {
    components:{
        Header,
        Footer
    },
    created(){
        this.runInv()
      this.showRmap()//获取需要展示的轮播图
    },
    data(){
        return{
            dataList:[],//获取轮播图
            currentIndex:0, //默认显示图片
            timer:null      //定时器
        }
    },
    methods:{
        gotoPage(index) {
            this.currentIndex = index;
        },
        runInv() {
            this.timer=setInterval(() => {
                this.gotoPage(this.nextIndex)
            },2000)
        },
      async showRmap(){
        const {data: res} =await  this.$http.get("/selectAllCarouselMap")
        console.log(res)
        if(res.flag ==0){
          for(var i = 0;i < res.data.length ;i++){
            if(res.data[i].status == '01'){
              this.dataList.push(res.data[i].img)
            }
          }
        }
      }
    },
    computed:{
        //上一张
        prevIndex() {
            if(this.currentIndex == 0) {
                return this.dataList.length-1;
            }else{
                return this.currentIndex-1;
            }
        },
        //下一张
        nextIndex() {
            if(this.currentIndex == this.dataList.length-1) {
                return 0;
            }else {
                return this.currentIndex + 1;
            }
        }
    }
}
</script>
<style scoped>
    /*轮播图*/
    ul li {
        list-style: none;
        float: left;
        width: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        color: rgba(255,255,255,0.8);
        font-size: 25px;
    }
    .banner {
        height:500px;
        margin:100px auto 0px auto;
        position:relative;
    }
    .banner img {
        width:100%;
        height:500px;
        display:block;
    }
    .banner .page {
        background: rgba(0,0,0,0.5);
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
    }
    .banner .page ul {
        float:right;
    }
    .current {
        color: #ff6700;
    }
    .circle{
        width: 25px;
        height: 25px;
        background-color: grey;
        margin-right: 20px;
        border-radius:100% ;
        border:2px solid white;
        cursor: pointer;
    }
    .middle{
        margin:0 auto;
        height:520px;
    }
    .content{
		width:80%;
        text-align:center;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:40px;
		font-size:20px;
		color:grey;
	}
    .line{
        height:100px;
		width:100%;
		line-height:100px;
		background:white;
		text-align: center;
		font-size:40px;
		font-weight:600;
	}
    .middle_img{
		height:250px;
		width:33.333%;
		background:white;
		float:left;
		background-size: 100% 100%; 
		background-repeat: no-repeat; 
	}
	.middle_img1{
		height:250px;
		width:50%;
		background:white;
		float:left;
		background-size: 100% auto; 
		background-repeat: no-repeat; 
	}
	.middle_content{
        padding-left:25px;
        box-sizing:border-box;
		height:50%;
		margin-top:10%;
		color:white;
	}
    .cooperation{
        margin:200px auto 30px auto;
        height:150px;
        width:100%;
    }
    .cooperation>tr{
        padding-left:200px;
        padding-right:200px;
        display:flex;
        justify-content: space-between;
    }
    .coImg{
	    height:150px;
	    width:300px;
    }
</style>